<template>
  <el-dialog title="创建模型" :visible.sync="dialogVisible" width="35%" :before-close="handleClose" :close-on-click-modal="false">
    <div class="j-new-model-body">
      <el-form ref="form" label-position="right" label-width="80px" size="small">
        <el-form-item label="模型名称">
          <el-input v-model="model.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="唯一标识">
          <el-input v-model="model.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="基础字段">
          <el-select v-model="select" multiple placeholder="请选择" style="width:100%">
            <el-option :label="item.title" :value="index" v-for="(item,index) in options" :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="新增字段" v-if="fields.length !== 0">
          <el-row style="margin-bottom: 5px" v-for="(item,index) in fields" :key="index">
            <el-col :span="7" style="padding-right: 5px;">
              <el-input v-model="item.title" placeholder="输入字段名称"></el-input>
            </el-col>
            <el-col :span="7" style="padding-right: 5px;">
              <el-input v-model="item.field" placeholder="输入字段标识"></el-input>
            </el-col>
            <el-col :span="7" style="padding-right: 5px;">
              <el-select v-model="item.type" placeholder="选择字段类型">
                <el-option label="字符串" value="String"></el-option>
                <el-option label="数字" value="Number"></el-option>
                <el-option label="日期" value="Date"></el-option>
                <el-option label="二进制" value="Buffer"></el-option>
                <el-option label="布尔值" value="Boolean"></el-option>
                <el-option label="数组" value="Array"></el-option>
              </el-select>
            </el-col>
            <el-col :span="3" style="text-align: center;">
              <el-button type="danger" @click="handleDelete(index)" icon="el-icon-delete" circle></el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label=" ">
          <el-button icon="el-icon-plus" @click="handleAdd">增加一个字段</el-button>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" size="small" @click="handleAffirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script type="text/javascript">
import library from './library'


function copy_data(value) {
  return JSON.parse(JSON.stringify(value));
}


export default {
  props: {
    value: [Array, Object, Number, String]
  },
  data() {
    return {
      options: library,
      select: [],
      fields: [],
      dialogVisible: false,
      model: {
        title: '',
        name: '',
        fields: [],
      }
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    // models:function(argument){
    //   return this.value.models
    // }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  methods: {
    /**
     * 关闭弹窗
     * @return {[type]} [description]
     */
    handleClose() {
      this.dialogVisible = false;
    },
    /**
     * 删除字段
     * @return {[type]} [description]
     */
    handleDelete(index) {
      this.fields.splice(index, 1);
    },
    /**
     * 新增一个字段
     * @return {[type]} [description]
     */
    handleAdd() {
      this.fields.push({
        name: "",
        title: "",
        type: "string"
      })
    },
    getField() {
      let data = [];
      for (let index in this.select) {
        let key = this.select[index]
        let item = this.options[key];
        data.push(item);
      }
      return data;
    },
    /**
     * 添加图层
     * @return {[type]} [description]
     */
    handleAffirm() {
      let basic = {
        title: "字段标题",
        field: "",
        type: "String",
        required: false,
        default: "",
        index: false, //设定索引值nom 
        unique: false, //索引值唯一
        sparse: false, //是否启用稀疏索引
        capped: 0, //限制长度
        min: 0,
        max: 0,
        format: {
          is_format: false, //是否格式化
          value: "" //格式化类型
        },
        validate: {
          is_validate: false,
          custom: false,
          value: "",
          regular: ""
        },
        degree: 1
      }

      let fields = this.fields.concat(this.getField());

      let data = [];
      //循环设置
      for (let i in fields) {
        let _base = copy_data(basic);
        let item = copy_data(library[i]);
        data.push(Object.assign(_base, item))
      }
      //console.log(data, this.$cloud);
      this.model.fields = data;
      this.$cloud.post("build/create", {
        action: "insert",
        data: this.model
      }).then(response => {
        this.select = [];
        this.fields = [];
        this.dialogVisible = false;
        this.model = {
          title: '',
          name: '',
          fields: []
        }
      }).catch(error => {
        console.log(error);
      });
    }
  }
}

</script>
<style type="text/css" lang="scss">
</style>
